<template>
  <Modal :on-cancel="cancel" v-model="show" width='60' title="数据批量导入">
    <div class="step-container">
      <Steps :current="step_current">
        <Step title="上传数据模板">
          <span slot="icon">01</span>
        </Step>
        <Step title="数据验证">
          <span slot="icon">02</span>
        </Step>
        <Step title="上传成功">
          <span slot="icon">03</span>
        </Step>
      </Steps>
    </div>
    <div class="body">
      <One v-if='step_current === 0' @upload-success='uploadSuccess'></One>
      <Two @write-data='writeData' v-if='step_current === 1' :validatorCode="validatorCode" :data='validatorResult' @previous='init'></Two>
      <Three @success="onSuccess" @previous='init' v-if='step_current === 2' :errors="errors" :error="error" :errorCount="errorCount" :importCount="importCount"></Three>
    </div>
    <span slot="footer"></span>
  </Modal>
</template>
<style scoped>
.body{
  width: 85%;
  margin-left: 15%;
}
.step-container{
  display: flex;
  width: 85%;
  margin-left: 15%;
  justify-content: center;
}
</style>
<script>
import One from './one'
import Two from './two'
import Three from './three'
import { setSchoolImportFile, schoolFastImport } from '@/graphql/mutation/school/index'
export default {
  name: 'ImportData',
  components: {
    One,
    Two,
    Three
  },
  data () {
    return {
      errors: [],
      error: false,
      errorCount: 0,
      importCount: 0,
      show: false,
      step_current: 0,
      school_id: '',
      school_name: '',
      job_id: '',
      validatorResult: null,
      validatorCode: 200
    }
  },
  methods: {
    onSuccess () {
      this.show = false
      this.init()
    },
    writeData () {
      // 导入数据
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '导入数据中')
          ])
        }
      })
      schoolFastImport({
        input: {
          id: this.job_id
        }
      }).then((res) => {
        const { school_fast_import } = res.data
        this.error = false
        this.errorCount = school_fast_import.errorNum
        this.importCount = school_fast_import.dataNum
        this.errors = school_fast_import.errors
        this.$Spin.hide()
        this.$nextTick(() => {
          this.step_current = 2
        })
      }).catch(() => {
        this.error = true
        this.$Spin.hide()
        this.$nextTick(() => {
          this.step_current = 2
        })
      })
      // 改变two 导入状态未loading
    },
    init () {
      this.step_current = 0
      this.validatorResult = null
      this.validatorCode = 200
      this.job_id = ''
    },
    open (id) {
      this.school_id = id
      this.step_current = 1
      this.$nextTick(() => {
        this.show = true
        this.step_current = 0
      })
    },
    ok () {
      this.show = false
    },
    cancel () {
      this.show = false
    },
    uploadSuccess (name) {
      this.$Spin.show({
        render: (h) => {
          return h('div', [
            h('Icon', {
              'class': 'demo-spin-icon-load',
              props: {
                type: 'ios-loading',
                size: 18
              }
            }),
            h('div', '校验数据中...')
          ])
        }
      })
      // 提交并校验数据
      const { school_id } = this
      setSchoolImportFile({ input: {
        file_url: name,
        school_id
      } }).then((res) => {
        const { data, code } = res.data.set_school_import_file
        this.$Spin.hide()
        // 弹窗校验数据中
        this.validatorResult = data
        this.validatorCode = code
        this.job_id = data.job_id
        this.$nextTick(() => {
          this.step_current = 1
        })
      }).catch(() => {
        this.$Spin.hide()
      })
    }
  }
}
</script>
